<template>
  <van-popup 
  v-model="show" 
  position="right" 
  @click-overlay="clickOverlay" 
  class="my-popup">
    <van-collapse v-model="activeName" accordion @change="changeCollapseItem" class="my-collapse">
      <van-collapse-item
        :title="dropdownValues.BuildName == '' ? '整体楼栋' : dropdownValues.BuildName"
        name="1"
      >
        <van-radio-group v-model="dropdownValues.BuildName">
          <van-radio
            v-for="(item,index) in buildingList"
            :key="index"
            @click="clickTung(item)"
            :name="item.value"
            class="my-radio"
          >{{item.label}}</van-radio>
        </van-radio-group>
      </van-collapse-item>
      <van-collapse-item
        :title="dropdownValues.Specialty == '' ? '全部专业' : dropdownValues.Specialty"
        name="2"
        v-if="showSpecialty"
      >
        <van-radio-group v-model="dropdownValues.Specialty">
          <van-radio
            v-for="(item,index) in specialtyList"
            :key="index"
            @click="clickMajor(item)"
            :name="item.value"
            class="my-radio"
          >{{item.label}}</van-radio>
        </van-radio-group>
      </van-collapse-item>
      <van-collapse-item
        :title="dropdownValues.Floor == '' ? '全部楼层' : dropdownValues.Floor"
        name="3"
        v-if="showFloor"
      >
        <van-radio-group v-model="dropdownValues.Floor">
          <van-radio
            v-for="(item,index) in floorList"
            :key="index"
            @click="clickFloor(item)"
            :name="item.value"
            class="my-radio"
          >{{item.label}}</van-radio>
        </van-radio-group>
      </van-collapse-item>
      <van-collapse-item
        :title="dropdownValues.ResourceNameSpec == '' ? '全部物资' : dropdownValues.ResourceNameSpec"
        name="4"
        v-if="showResourceName"
      >
        <van-radio-group v-model="dropdownValues.ResourceNameSpec">
          <!-- <van-radio name="">全部物资</van-radio> -->
          <van-radio
            v-for="(item,index) in resourceList"
            :key="index"
            @click="clickResources(item)"
            :name="item.value"
            class="my-radio"
          >{{item.label}}</van-radio>
        </van-radio-group>
      </van-collapse-item>
      <van-collapse-item
        :title="dropdownValues.TaskName == '' ? '全部节点' : dropdownValues.TaskName"
        name="5"
        v-if="showTask"
      >
        <van-radio-group v-model="dropdownValues.TaskName">
          <van-radio
            v-for="(item,index) in taskList"
            :key="index"
            @click="clickNode(item)"
            :name="item.label"
            class="my-radio"
          >{{item.label}}</van-radio>
        </van-radio-group>
      </van-collapse-item>
    </van-collapse>
    <div class="screening-btn">
      <van-button type="primary" round size="large" @click="resetFunc">重置</van-button>
      <van-button type="info" round size="large" @click="recordCheck">确认</van-button>
    </div>
  </van-popup>
</template>

<script type='textecmascript-6'>
import {
  GetBuilding,
  GetSpecialtybyBuilding,
  GetFloorbyBuilding,
  GetResourceBySpInfo,
  GetTaskByInfo,
  GetResourceSpecByBuildFloor
} from "@/api/api.js";
export default {
  data() {
    return {
      show: false,
      ProjectID: localStorage.getItem("projectid"), //项目ID
      userID: localStorage.getItem("userId"), //用户ID
      activeName: "1", //默认展开第一个
      dropdownValues: {
        BuildName: "", //整栋模型
        Specialty: "", //专业
        Floor: "", //楼层
        TaskId: "", //进度节点ID
        TaskName: "",  //进度节点名称
        ResourceName: "", //物资名称
        Spec: "",  //规格型号
        ResourceNameSpec: ""  //物资名称+规格型号
      },
      buildingList: [], //整栋模型列表
      specialtyList: [], //专业列表
      floorList: [], //楼层列表
      taskList: [], //进度节点列表
      resourceList: [] //物资列表
    };
  },
  props: {
    showPopup: {
      type: Boolean,
      default: false
    },
    showSpecialty: {
      type: Boolean,
      default: true
    },
    showFloor: {
      type: Boolean,
      default: true
    },
    showTask: {
      type: Boolean,
      default: true
    },
    showResourceName: {
      type: Boolean,
      default: true
    }
  },
  created() {
    this.show = this.showPopup
    this.getBuildingData()
  },
  methods: {
    /**
     * @name 获取模型的楼栋数据
     */
    async getBuildingData() {
      let buildingData = await this.Request(
        GetBuilding({ projectid: this.ProjectID })
      );
      if (buildingData.StatusCode == 200) {
        this.buildingList = [];
        this.buildingList.unshift({ label: "整体楼栋", value: "" });
        for (let i = 0; i < buildingData.Detiel.length; i++) {
          let Option = {};
          Option.label = buildingData.Detiel[i].text;
          Option.value = buildingData.Detiel[i].id;
          this.buildingList.push(Option);
        }
      } else {
        this.$toast({
          type: "fail",
          message: buildingData.message ? buildingData.message : "后台异常",
          className: "my-toast"
        });
      }
    },
    /**
     * @name 根据楼栋获取模型的专业
     */
    async getSpecialtyData() {
      let specialtyData = await this.Request(
        GetSpecialtybyBuilding({
          projectid: this.ProjectID,
          building: this.dropdownValues.BuildName
        })
      );
      if (specialtyData.StatusCode == 200) {
        this.specialtyList = [];
        this.specialtyList.unshift({ label: "全部专业", value: "" });
        if (specialtyData.Detiel.length > 0) {
          for (let i = 0; i < specialtyData.Detiel.length; i++) {
            let Option = {};
            Option.label = specialtyData.Detiel[i].text;
            Option.value = specialtyData.Detiel[i].id;
            this.specialtyList.push(Option);
          }
        } else {
          this.specialtyList = [];
        }
      } else {
        this.$toast({
          type: "fail",
          message: specialtyData.message ? specialtyData.message : "后台异常",
          className: "my-toast"
        });
      }
    },
    /**
     * @name 根据楼栋获取模型的楼层
     */
    async getFloorData() {
      let floorData = await this.Request(
        GetFloorbyBuilding({
          projectid: this.ProjectID,
          building: this.dropdownValues.BuildName,
          specialty: this.dropdownValues.Specialty
        })
      );
      if (floorData.StatusCode == 200) {
        this.floorList = [];
        this.floorList.unshift({ label: "全部楼层", value: "" });
        if (floorData.Detiel.length > 0) {
          for (let i = 0; i < floorData.Detiel.length; i++) {
            let Option = {};
            Option.label = floorData.Detiel[i].text;
            Option.value = floorData.Detiel[i].id;
            this.floorList.push(Option);
          }
        } else {
          this.floorList = [];
        }
      } else {
        this.$toast({
          type: "fail",
          message: floorData.message ? floorData.message : "后台异常",
          className: "my-toast"
        });
      }
    },
    /**
     * @name 根据楼栋楼层专业获取物资名称
     */
    async getResourceData() {
      let resourceData = await this.Request(
        GetResourceSpecByBuildFloor({
          ProjectID: this.ProjectID,
          BuildName: this.dropdownValues.BuildName,
          Specialty: this.dropdownValues.Specialty,
          Floor: this.dropdownValues.Floor
        })
      );
      if (resourceData.StatusCode == 200) {
        this.resourceList = [];
        this.resourceList.unshift({ label: "全部物资", value: "" });
        if (resourceData.Detiel.length > 0) {
          for (let i = 0; i < resourceData.Detiel.length; i++) {
            let Option = {};
            Option.label = resourceData.Detiel[i].text + "-" + resourceData.Detiel[i].code;
            Option.value = resourceData.Detiel[i].id + "_" + resourceData.Detiel[i].code;
            this.resourceList.push(Option);
          }
          // console.log(this.resourceList)
          // this.resourceList = resourceData.Detiel
        } else {
          this.resourceList = [];
        }
      } else {
        this.$toast({
          type: "fail",
          message: resourceData.message ? resourceData.message : "后台异常",
          className: "my-toast"
        });
      }
    },
    /**
     * @name 根据楼栋楼层专业获取任务（进度）名称
     */
    async getTaskData() {
      let taskData = await this.Request(
        GetTaskByInfo({
          ProjectID: this.ProjectID,
          BuildName: this.dropdownValues.BuildName,
          Specialty: this.dropdownValues.Specialty,
          Floor: this.dropdownValues.Floor,
          ResourceName: this.dropdownValues.ResourceName,
          Spec: this.dropdownValues.Spec
        })
      );
      if (taskData.StatusCode == 200) {
        this.taskList = [];
        this.taskList.unshift({ label: "全部节点", value: "" });
        if (taskData.Detiel.length > 0) {
          for (let i = 0; i < taskData.Detiel.length; i++) {
            let Option = {};
            Option.label = taskData.Detiel[i].text;
            Option.value = taskData.Detiel[i].id;
            this.taskList.push(Option);
          }
        } else {
          this.taskList = [];
        }
      } else {
        this.$toast({
          type: "fail",
          message: taskData.message ? taskData.message : "后台异常",
          className: "my-toast"
        });
      }
    },
    /**
     * @name 切换折叠面板时触发
     * @param {string | array} activeNames
     */
    changeCollapseItem(activeNames) {
    //   console.log("==折叠面板 activeNames==", activeNames);
      switch (activeNames) {
        case "1":
          {
            this.getBuildingData();
          }
          break;
        case "2":
          {
            if (this.dropdownValues.BuildName === "") {
                this.$toast({
                    message: "请先选择楼栋！",
                    className: "my-toast"
                });
                return;
            }
          }
          break;
        case "3":
          {
            if (this.dropdownValues.Specialty === "") {
              this.$toast({
                message: "请先选择专业！",
                className: "my-toast"
              });
              return;
            }
          }
          break;
        case "4":
          {
            if (this.dropdownValues.Floor === "") {
              this.$toast({
                message: "请先选择楼层！",
                className: "my-toast"
              });
              return;
            }
          }
          break;
        case "5":
          {
            if (this.dropdownValues.ResourceName === "") {
              this.$toast({
                message: "请先选择物资名称！",
                className: "my-toast"
              });
              return;
            }
          }
          break;

        default:
          break;
      }
    },
    // 重置
    resetFunc() {
      // for (let k of Object.keys(this.dropdownValues)) {
      //     this.dropdownValues.k = ''
      // }
      this.activeName = "1";
      this.dropdownValues.BuildName = "";
      this.dropdownValues.Specialty = "";
      this.dropdownValues.Floor = "";
      this.dropdownValues.ResourceName = "";
      this.dropdownValues.Spec = "";
      this.dropdownValues.ResourceNameSpec = "";
      this.dropdownValues.TaskId = "";
      this.dropdownValues.TaskName = "";

      // this.taskList = [];
      // this.buildingList = [];
      // this.specialtyList = [];
      // this.floorList = []
    },
    //确认
    recordCheck() {
      this.$emit("searchFrom", this.dropdownValues);
      this.show = false;
      this.$emit("showPopup", false);
      // console.log('确认',this.screen_list)
      // this.page = 1;
      // this.costControlLists = []
      // this.getCostData()
      // this.shwoScreen = false
    },
    //选中楼栋
    clickTung(item) {
      // console.log(item,'clickTung')
      // this.screen_list.push(item)
      this.dropdownValues.BuildName = item.value;
      this.dropdownValues.Specialty = "";
      this.dropdownValues.Floor = "";
      this.dropdownValues.ResourceName = "";
      this.dropdownValues.Spec = "";
      this.dropdownValues.ResourceNameSpec = "";
      this.dropdownValues.TaskId = "";
      this.dropdownValues.TaskName = "";
      if (this.showSpecialty) {
        this.getSpecialtyData();
      }
    },
    //选中专业
    clickMajor(item) {
      this.dropdownValues.Specialty = item.value;
      this.dropdownValues.Floor = "";
      this.dropdownValues.ResourceName = "";
      this.dropdownValues.Spec = "";
      this.dropdownValues.ResourceNameSpec = "";
      this.dropdownValues.TaskId = "";
      this.dropdownValues.TaskName = "";
      if (this.showFloor) {
        this.getFloorData();
      }
    },
    //选中楼层
    clickFloor(item) {
      this.dropdownValues.Floor = item.value;
      this.dropdownValues.ResourceName = "";
      this.dropdownValues.Spec = "";
      this.dropdownValues.ResourceNameSpec = "";
      this.dropdownValues.TaskId = "";
      this.dropdownValues.TaskName = "";
      if (this.showResourceName) {
        this.getResourceData();
      }
    },
    //选中物资
    clickResources(item) {
      this.dropdownValues.ResourceNameSpec = item.value
      this.dropdownValues.ResourceName = item.value.split('_')[0];
      // this.dropdownValues.ResourceName = item.text;
      this.dropdownValues.Spec = item.value.split('_')[1];
      // this.dropdownValues.Spec = item.code;
      this.dropdownValues.TaskId = "";
      this.dropdownValues.TaskName = "";
      if (this.showTask) {
        this.getTaskData();
      }
    },
    //选中进度节点
    clickNode(item) {
      this.dropdownValues.TaskId = item.value;
      this.dropdownValues.TaskName = item.label;
    },
    /**
     * 点击遮罩层时触发
     */
    clickOverlay() {
      this.show = false;
      this.$emit("showPopup", false);
    }
  },
  watch: {
    showPopup(val) {
      this.show = val
    }
  }
};
</script>
<style>
@import "~@/assets/css/resetVant.css";
.my-popup{
    height: 100%;
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: white;
}
.my-popup .van-cell{
    display: flex;
    align-items: center;
    height: 88px;
    font-size: 30px;
    padding: 20px 40px;
}
.my-popup .van-cell__left-icon, .my-popup .van-cell__right-icon{
    font-size: 30px;
}
.my-collapse{
    flex: 1;
    overflow-y: auto;
}
.my-collapse .van-collapse-item__content{
    padding: 10px 30px;
    font-size: 30px;
    background-color: #F0F2F5;
    max-height: 800px;
    overflow-y: auto;
}
.my-radio{
    height: 80px;
    display: flex;
    align-items: center;
    /* border-bottom: 1px #E5E5E5 solid; */
}
.my-radio:last-child{
    border-bottom: 0;
}
.my-radio .van-radio__label{
    margin-left: 30px;
}
.screening-btn{
    display: flex;
    justify-content: space-around;
    margin: 40px 0;
}
.screening-btn .van-button{
    width: 40%;
}
.screening-btn .van-button--primary{
    background-color: #FFBA00;
    border: 1px solid #FFBA00;  /*no*/
}
</style>